<template>
  <u-popup closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
    :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius"
    :closeable="closeable">
    <view class="u-calendar">
      <view class="u-calendar__header">
        <view class="u-calendar__header__text" v-if="!$slots['tooltip']">
          {{toolTip}}
        </view>
        <slot v-else name="tooltip" />
      </view>
      <view class="u-calendar__action u-flex u-row-center">
        <view class="u-calendar__action__icon">
          <u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYearHandler(0)">
          </u-icon>
        </view>
        <view class="u-calendar__action__icon">
          <u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon>
        </view>
        <view class="u-calendar__action__text">{{ showTitle }}</view>
        <view class="u-calendar__action__icon">
          <u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)">
          </u-icon>
        </view>
        <view class="u-calendar__action__icon">
          <u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYearHandler(1)">
          </u-icon>
        </view>
      </view>
      <view class="u-calendar__week-day">
        <view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view>
      </view>
      <view class="u-calendar__content">
        <!-- 前置空白部分 -->
        <block v-for="(item, index) in weekdayArr" :key="index">
          <view class="u-calendar__content__item"></view>
        </block>
        <view class="u-calendar__content__item" :class="{
					'u-hover-class':openDisAbled(year,month,index+1),
					'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
					'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
				}" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index"
          @tap="dateClick(index)">
          <view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
            <view>{{ index + 1 }}</view>
          </view>
          <view class="u-calendar__content__item__tips" :style="{color:activeColor}"
            v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
          <view class="u-calendar__content__item__tips" :style="{color:activeColor}"
            v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
        </view>
        <view class="u-calendar__content__bg-month">{{month}}</view>
      </view>
      <view class="u-calendar__bottom">
        <view class="u-calendar__bottom__choose">
          <text>{{mode == 'date' ? activeDate : startDate}}</text>
          <text v-if="endDate">至{{endDate}}</text>
        </view>
        <view class="u-calendar__bottom__btn">
          <u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
        </view>
      </view>
    </view>
  </u-popup>
</template>
<script>
  /**
   * calendar 日历
   * @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
   * @tutorial http://uviewui.com/components/calendar.html
   * @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围
   * @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起
   * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
   * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
   * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
   * @property {String Number} max-year 可切换的最大年份(默认2050)
   * @property {String Number} min-year 可切换的最小年份(默认1950)
   * @property {String Number} min-date 最小可选日期(默认1950-01-01)
   * @property {String Number} max-date 最大可选日期(默认当前日期)
   * @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
   * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
   * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
   * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
   * @property {String} color 日期字体的默认颜色(默认#303133)
   * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
   * @property {String Number} z-index 弹出时的z-index值(默认10075)
   * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
   * @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
   * @property {String} range-color 选择范围内字体颜色(默认#2979ff)
   * @property {String} start-text 起始日期底部的提示文字(默认 '开始')
   * @property {String} end-text 结束日期底部的提示文字(默认 '结束')
   * @property {String} btn-type 底部确定按钮的主题(默认 'primary')
   * @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
   * @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
   * @example <u-calendar v-model="show" :mode="mode"></u-calendar>
   */

  export default {
    name: 'u-calendar',
    props: {
      safeAreaInsetBottom: {
        type: Boolean,
        default: false
      },
      // 是否允许通过点击遮罩关闭Picker
      maskCloseAble: {
        type: Boolean,
        default: true
      },
      // 通过双向绑定控制组件的弹出与收起
      value: {
        type: Boolean,
        default: false
      },
      // 弹出的z-index值
      zIndex: {
        type: [String, Number],
        default: 0
      },
      // 是否允许切换年份
      changeYear: {
        type: Boolean,
        default: true
      },
      // 是否允许切换月份
      changeMonth: {
        type: Boolean,
        default: true
      },
      // date-单个日期选择，range-开始日期+结束日期选择
      mode: {
        type: String,
        default: 'date'
      },
      // 可切换的最大年份
      maxYear: {
        type: [Number, String],
        default: 2050
      },
      // 可切换的最小年份
      minYear: {
        type: [Number, String],
        default: 1950
      },
      // 最小可选日期(不在范围内日期禁用不可选)
      minDate: {
        type: [Number, String],
        default: '1950-01-01'
      },
      /**
       * 最大可选日期
       * 默认最大值为今天，之后的日期不可选
       * 2030-12-31
       * */
      maxDate: {
        type: [Number, String],
        default: ''
      },
      // 弹窗顶部左右两边的圆角值
      borderRadius: {
        type: [String, Number],
        default: 20
      },
      // 月份切换按钮箭头颜色
      monthArrowColor: {
        type: String,
        default: '#606266'
      },
      // 年份切换按钮箭头颜色
      yearArrowColor: {
        type: String,
        default: '#909399'
      },
      // 默认日期字体颜色
      color: {
        type: String,
        default: '#303133'
      },
      // 选中|起始结束日期背景色
      activeBgColor: {
        type: String,
        default: '#2979ff'
      },
      // 选中|起始结束日期字体颜色
      activeColor: {
        type: String,
        default: '#ffffff'
      },
      // 范围内日期背景色
      rangeBgColor: {
        type: String,
        default: 'rgba(41,121,255,0.13)'
      },
      // 范围内日期字体颜色
      rangeColor: {
        type: String,
        default: '#2979ff'
      },
      // mode=range时生效，起始日期自定义文案
      startText: {
        type: String,
        default: '开始'
      },
      // mode=range时生效，结束日期自定义文案
      endText: {
        type: String,
        default: '结束'
      },
      //按钮样式类型
      btnType: {
        type: String,
        default: 'primary'
      },
      // 当前选中日期带选中效果
      isActiveCurrent: {
        type: Boolean,
        default: true
      },
      // 切换年月是否触发事件 mode=date时生效
      isChange: {
        type: Boolean,
        default: false
      },
      // 是否显示右上角的关闭图标
      closeable: {
        type: Boolean,
        default: true
      },
      // 顶部的提示文字
      toolTip: {
        type: String,
        default: '选择日期'
      },
      // 默认值
      defaultDate: {
        type: String
      }
    },
    data() {
      return {
        // 星期几,值为1-7
        weekday: 1,
        weekdayArr: [],
        // 当前月有多少天
        days: 0,
        daysArr: [],
        showTitle: '',
        year: 2020,
        month: 0,
        day: 0,
        startYear: 0,
        startMonth: 0,
        startDay: 0,
        endYear: 0,
        endMonth: 0,
        endDay: 0,
        today: '',
        activeDate: '',
        startDate: '',
        endDate: '',
        isStart: true,
        min: null,
        max: null,
        weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
      };
    },
    computed: {
      dataChange() {
        return `${this.mode}-${this.minDate}-${this.maxDate}`;
      },
      uZIndex() {
        // 如果用户有传递z-index值，优先使用
        return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
      }
    },
    watch: {
      dataChange(val) {
        this.init()
      }
    },
    created() {
      this.init()
    },
    methods: {
      getColor(index, type) {
        let color = type == 1 ? '' : this.color;
        let day = index + 1
        let date = `${this.year}-${this.month}-${day}`
        let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
        let start = this.startDate.replace(/\-/g, '/')
        let end = this.endDate.replace(/\-/g, '/')
        if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
          color = type == 1 ? this.activeBgColor : this.activeColor;
        } else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
          color = type == 1 ? this.rangeBgColor : this.rangeColor;
        }
        return color;
      },
      init() {
        let now = new Date();
        this.year = now.getFullYear();
        this.month = now.getMonth() + 1;
        this.day = now.getDate();
        this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
        this.activeDate = this.defaultDate || this.today;
        if(this.defaultDate){
          let defaultDate = new Date(this.defaultDate)
          this.activeDate = `${defaultDate.getFullYear()}-${defaultDate.getMonth() + 1}-${defaultDate.getDate()}`;
        }
        this.min = this.initDate(this.minDate);
        this.max = this.initDate(this.maxDate || this.today);
        this.startDate = "";
        this.startYear = 0;
        this.startMonth = 0;
        this.startDay = 0;
        this.endYear = 0;
        this.endMonth = 0;
        this.endDay = 0;
        this.endDate = "";
        this.isStart = true;
        this.changeData();
      },
      //日期处理
      initDate(date) {
        let fdate = date.split('-');
        return {
          year: Number(fdate[0] || 1920),
          month: Number(fdate[1] || 1),
          day: Number(fdate[2] || 1)
        }
      },
      openDisAbled: function(year, month, day) {
        let bool = true;
        let date = `${year}/${month}/${day}`;
        // let today = this.today.replace(/\-/g, '/');
        let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
        let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
        let timestamp = new Date(date).getTime();
        if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
          bool = false;
        }
        return bool;
      },
      generateArray: function(start, end) {
        return Array.from(new Array(end + 1).keys()).slice(start);
      },
      formatNum: function(num) {
        return num < 10 ? '0' + num : num + '';
      },
      //一个月有多少天
      getMonthDay(year, month) {
        let days = new Date(year, month, 0).getDate();
        return days;
      },
      getWeekday(year, month) {
        let date = new Date(`${year}/${month}/01 00:00:00`);
        return date.getDay();
      },
      checkRange(year) {
        let overstep = false;
        if (year < this.minYear || year > this.maxYear) {
          uni.showToast({
            title: "日期超出范围啦~",
            icon: 'none'
          })
          overstep = true;
        }
        return overstep;
      },
      changeMonthHandler(isAdd) {
        if (isAdd) {
          let month = this.month + 1;
          let year = month > 12 ? this.year + 1 : this.year;
          if (!this.checkRange(year)) {
            this.month = month > 12 ? 1 : month;
            this.year = year;
            this.changeData();
          }

        } else {
          let month = this.month - 1;
          let year = month < 1 ? this.year - 1 : this.year;
          if (!this.checkRange(year)) {
            this.month = month < 1 ? 12 : month;
            this.year = year;
            this.changeData();
          }
        }
      },
      changeYearHandler(isAdd) {
        let year = isAdd ? this.year + 1 : this.year - 1;
        if (!this.checkRange(year)) {
          this.year = year;
          this.changeData();
        }
      },
      changeData() {
        this.days = this.getMonthDay(this.year, this.month);
        this.daysArr = this.generateArray(1, this.days)
        this.weekday = this.getWeekday(this.year, this.month);
        this.weekdayArr = this.generateArray(1, this.weekday)
        this.showTitle = `${this.year}年${this.month}月`;
        if (this.isChange && this.mode == 'date') {
          this.btnFix(true);
        }
      },
      dateClick: function(day) {
        day += 1;
        if (!this.openDisAbled(this.year, this.month, day)) {
          this.day = day;
          let date = `${this.year}-${this.month}-${day}`;
          if (this.mode == 'date') {
            this.activeDate = date;
          } else {
            let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/'))
              .getTime()
            if (this.isStart || compare) {
              this.startDate = date;
              this.startYear = this.year;
              this.startMonth = this.month;
              this.startDay = this.day;
              this.endYear = 0;
              this.endMonth = 0;
              this.endDay = 0;
              this.endDate = "";
              this.activeDate = "";
              this.isStart = false;
            } else {
              this.endDate = date;
              this.endYear = this.year;
              this.endMonth = this.month;
              this.endDay = this.day;
              this.isStart = true;
            }
          }
        }
      },
      close() {
        // 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
        this.$emit('input', false);
      },
      getWeekText(date) {
        date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
        let week = date.getDay();
        return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
      },
      btnFix(show) {
        if (!show) {
          this.close();
        }
        if (this.mode == 'date') {
          let arr = this.activeDate.split('-')
          let year = this.isChange ? this.year : Number(arr[0]);
          let month = this.isChange ? this.month : Number(arr[1]);
          let day = this.isChange ? this.day : Number(arr[2]);
          //当前月有多少天
          let days = this.getMonthDay(year, month);
          let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
          let weekText = this.getWeekText(result);
          let isToday = false;
          if (`${year}-${month}-${day}` == this.today) {
            //今天
            isToday = true;
          }
          this.$emit('change', {
            year: year,
            month: month,
            day: day,
            days: days,
            result: result,
            week: weekText,
            isToday: isToday,
            // switch: show //是否是切换年月操作
          });
        } else {
          if (!this.startDate || !this.endDate) return;
          let startMonth = this.formatNum(this.startMonth);
          let startDay = this.formatNum(this.startDay);
          let startDate = `${this.startYear}-${startMonth}-${startDay}`;
          let startWeek = this.getWeekText(startDate)

          let endMonth = this.formatNum(this.endMonth);
          let endDay = this.formatNum(this.endDay);
          let endDate = `${this.endYear}-${endMonth}-${endDay}`;
          let endWeek = this.getWeekText(endDate);
          this.$emit('change', {
            startYear: this.startYear,
            startMonth: this.startMonth,
            startDay: this.startDay,
            startDate: startDate,
            startWeek: startWeek,
            endYear: this.endYear,
            endMonth: this.endMonth,
            endDay: this.endDay,
            endDate: endDate,
            endWeek: endWeek
          });
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  @import "../../libs/css/style.components.scss";

  .u-calendar {
    color: $u-content-color;

    &__header {
      width: 100%;
      box-sizing: border-box;
      font-size: 30rpx;
      background-color: #fff;
      color: $u-main-color;

      &__text {
        margin-top: 30rpx;
        padding: 0 60rpx;
        @include vue-flex;
        justify-content: center;
        align-items: center;
      }
    }

    &__action {
      padding: 40rpx 0 40rpx 0;

      &__icon {
        margin: 0 16rpx;
      }

      &__text {
        padding: 0 16rpx;
        color: $u-main-color;
        font-size: 32rpx;
        line-height: 32rpx;
        font-weight: bold;
      }
    }

    &__week-day {
      @include vue-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 0;
      overflow: hidden;

      &__text {
        flex: 1;
        text-align: center;
      }
    }

    &__content {
      width: 100%;
      @include vue-flex;
      flex-wrap: wrap;
      padding: 6px 0;
      box-sizing: border-box;
      background-color: #fff;
      position: relative;

      &--end-date {
        border-top-right-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
      }

      &--start-date {
        border-top-left-radius: 8rpx;
        border-bottom-left-radius: 8rpx;
      }

      &__item {
        width: 14.2857%;
        @include vue-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 0;
        overflow: hidden;
        position: relative;
        z-index: 2;

        &__inner {
          height: 84rpx;
          @include vue-flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          font-size: 32rpx;
          position: relative;
          border-radius: 50%;

          &__desc {
            width: 100%;
            font-size: 24rpx;
            line-height: 24rpx;
            transform: scale(0.75);
            transform-origin: center center;
            position: absolute;
            left: 0;
            text-align: center;
            bottom: 2rpx;
          }
        }

        &__tips {
          width: 100%;
          font-size: 24rpx;
          line-height: 24rpx;
          position: absolute;
          left: 0;
          transform: scale(0.8);
          transform-origin: center center;
          text-align: center;
          bottom: 8rpx;
          z-index: 2;
        }
      }

      &__bg-month {
        position: absolute;
        font-size: 130px;
        line-height: 130px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #e4e7ed;
        z-index: 1;
      }
    }

    &__bottom {
      width: 100%;
      @include vue-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: #fff;
      padding: 0 40rpx 30rpx;
      box-sizing: border-box;
      font-size: 24rpx;
      color: $u-tips-color;

      &__choose {
        height: 50rpx;
      }

      &__btn {
        width: 100%;
      }
    }
  }
</style>
